<script lang="ts" setup>
import type { FormInstance } from "element-plus";
import { area_list } from "./province";

const emit = defineEmits(["submitSuccess"]);

const modelValue = defineModel<{
    name: string;
    phone: string;
    province: string;
}>();
const visible = defineModel<boolean>("visible");

const props = withDefaults(
    defineProps<{
        model: "add" | "edit" | "view";
    }>(),
    {
        model: "add"
    }
);

const rules = ref({
    name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
    phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
    province: [{ required: true, message: "请选择省份", trigger: "change" }]
});

const formRef = ref<FormInstance>();

const formData = ref({
    name: "",
    phone: "",
    province: ""
});

watch(
    () => modelValue.value,
    (newVal) => {
        formData.value = newVal || { name: "", phone: "", province: "" };
    }
);

watch(
    () => visible.value,
    (newVal) => {
        if (newVal === false) {
            formData.value = { name: "", phone: "", province: "" };
            formRef.value?.resetFields();
        }
    }
);

const validate = () => {
    return new Promise((resolve) => {
        formRef.value
            ?.validate()
            .then((res) => {
                resolve(res);
            })
            .catch(() => {
                resolve(false);
            });
    });
};

const submit = async () => {
    const valid = await validate();
    if (!valid) return;

    if (props.model === "add") {
        try {
            const res = await sellClient.addApi(formData.value);
            if (res.success) {
                ElMessage.success("新增成功");
                emit("submitSuccess");
                visible.value = false;
            } else {
                ElMessage.error(res.message || "新增失败");
            }
        } catch (error) {
            console.error(error);
            ElMessage.error("新增失败");
        }
    }
};
</script>
<template>
    <el-dialog
        v-model="visible"
        title="新增"
        draggable
        width="500"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
    >
        <el-form :model="formData" :rules="rules" label-position="top" ref="formRef" size="small">
            <el-form-item label="姓名" prop="name">
                <el-input v-model="formData.name" placeholder="请输入姓名" />
            </el-form-item>
            <el-form-item label="手机号" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入手机号" />
            </el-form-item>
            <el-form-item label="省份" prop="province">
                <el-select filterable v-model="formData.province" placeholder="请选择省份">
                    <el-option
                        v-for="item in area_list"
                        :label="item.name"
                        :value="item.name"
                        :key="item.adcode"
                    />
                </el-select>
            </el-form-item>
        </el-form>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="visible = false">关闭</el-button>
                <el-button type="primary" @click="submit">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>
<style lang="scss" scoped>
.data-form {
}
</style>
